<template>
  <div class="_wz_riskAcceptanceOperation">
    <div style="padding: 10px 0 0 0;">
      <Form ref="formAdd" :model="formData" label-position="right" :label-width="100" :rules="ruleValidate">

        <FormItem label="验收结果" prop="riskInspectItemReviewResult">
          <i-select v-model.number="formData.riskInspectItemReviewResult" filterable placeholder="请选择验收结果" clearable>
            <Option :value="0">不通过</Option>
            <Option :value="1">通过</Option>
          </i-select>
        </FormItem>
        <FormItem label="验收意见" prop="riskInspectItemReviewOpinion">
          <i-input v-model="formData.riskInspectItemReviewOpinion" placeholder="请填写验收意见" type="textarea" :autosize="{minRows: 5,maxRows: 5}"/>
        </FormItem>
        <FormItem label="验收描述" prop="riskInspectItemReviewContext">
          <i-input v-model="formData.riskInspectItemReviewContext" placeholder="请填写验收描述" type="textarea" :autosize="{minRows: 5,maxRows: 5}"/>
        </FormItem>
        <FormItem label="验收图片">
          <Upload action="*" :show-upload-list="false" :format="['jpg','jpeg','png']" :before-upload="riskInspectItemImgFileFun">
            <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
          </Upload>
          <div style="margin:10px 0 0 0;padding: 10px;min-height: 220px;border: 1px solid #e1e1e1;">
            <div style="width: 200px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in riskInspectItemImgList">
              <div class="_wz_insertimage" style="display: block;">
                <img :src="item" @error="public.imgDispose" />
                <div class="_wz_insertimage-cover">
                  <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                  <Icon type="ios-trash-outline" @click.native="riskInspectItemImgListRem(index)"></Icon>
                </div>
              </div>
            </div>
          </div>
        </FormItem>

        <FormItem label="签字照片" class="ivu-form-item-required">
          <div style="width: 200px;overflow: hidden;" @click="riskInspectItemSignFileType = true;">
            <div class="_wz_insertimage" style="display: block;" v-if="!signFile.url">
              点击签字
            </div>
            <div class="_wz_insertimage" style="display: block;" v-else>
              <img :src="signFile.url" @error="public.imgDispose" />
            </div>
          </div>
        </FormItem>

      </Form>
    </div>

    <!--图片查看-->
    <Modal title="人员签字" v-model="riskInspectItemSignFileType"  :mask-closable="false" :footer-hide="true">
      <div style="padding: 0 0 53px 0;" v-if="riskInspectItemSignFileType">
        <vue-esign ref="esign" class="mySign" :width="800" :height="300" :isCrop="false" :lineWidth="6" lineColor="#000000"/>
        <div class="demo-drawer-footer" style="z-index: 99;">
          <Button style="margin-right: 8px" @click="riskInspectItemSignFileType = false">取消</Button>
          <Button type="primary" @click="handleGenerate">提交</Button>
        </div>
      </div>
    </Modal>

    <div class="demo-drawer-footer" style="z-index: 99;">
      <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
      <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
    </div>

    <!--图片查看-->
    <Modal title="图片查看" v-model="visible">
      <img :src="imgSrc" v-if="visible" style="width: 100%" @error="public.imgDispose" />
    </Modal>

    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
export default {
  props: ['selectData'],//接收来自父组件的数据
  data() {
    return {
      uploadProgress: 0,//文件上传进度
      riskInspectItemSignFileType:false,//签字
      riskInspectItemImgList:[],//隐患资料
      riskInspectItemImgFileList:[],//隐患资料
      signFile:{//手签字
        url:'',
        data:null
      },
      //缩略图
      visible: false,
      imgSrc: "",

      systemUserList:[],//人员list
      spinShow: false,//本页加载
      formData: {},
      ruleValidate: {//正则
        riskInspectItemReviewOpinion: [
          {required: true, message: '请填写验收意见', trigger: 'blur'}
        ],
        riskInspectItemReviewResult: [
          {type:'number',required: true, message: '请填写验收结果', trigger: 'blur'}
        ],
        riskInspectItemReviewContext: [
          {required: true, message: '请填写验收描述', trigger: 'blur'}
        ],
      },
      subDeptList: [],//运输企业

    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;

    that.formData = that.selectData;
    //人员list
    that.axios.post(that.apiUrl.systemUserSystemUserList,{deptUuid:that.selectData.deptUuid}).then(res => {
      if (!!res) {
        that.systemUserList = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })


  },
  methods: {//执行的方法
    //删除
    riskInspectItemImgListRem(index){
      this.riskInspectItemImgList.splice(index, 1)
      this.riskInspectItemImgFileList.splice(index, 1)
    },
    //生成图片
    handleGenerate(){
      let that = this;
      // 使用生成器调用把签字的图片转换成为base64图片格式
      that.$refs.esign.generate().then((res) => {
        // base64转换成图片
        var arr = res.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

        while(n--){undefined
          u8arr[n] = bstr.charCodeAt(n);
        }
        var obj = new Blob([u8arr], {type:mime});
        that.signFile = {
          url : window.URL.createObjectURL(obj),
          data : obj
        }
        that.riskInspectItemSignFileType = false;
      }).catch((err) => {
        console.log(err)
        that.$Message.warning("请签名后再生成签字图片");// 画布没有签字时会执行这里提示一下
      });
    },

    //缩略图查看
    handleView(src) {
      this.imgSrc = src;
      this.visible = true;
    },

    //隐患资料
    riskInspectItemImgFileFun(file) {//新增的时候 处理图片数据
      let that = this; //如果是文件  就展示文件名
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        if(that.riskInspectItemImgFileList.length > 6){
          that.$Message.warning('最多可上传7张图片');
          return false;
        }
        that.riskInspectItemImgList.push(window.URL.createObjectURL(file));
        that.riskInspectItemImgFileList.push(file);
      } else {
        this.$Message.error('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },

    //提交表单
    addSubmit(name) {
      let that = this;
      that.$refs[name].validate((valid) => {
        if (valid) {//正则判断使用
          if (!that.signFile.data) {
            that.$Message.error('请上传手签照片');
            return false;
          }
          let data = that.formData;
          if(that.formData.riskInspectItemReviewResult == 0){
            that.formData.riskInspectItemHandleState = 0
          }

          data.riskInspectItemProcess = 4;
          data.riskInspectItemReviewState = 1;
          let formData = new FormData();

          for (let key in data) {
            formData.append(key, data[key]);
          }

          if (!!that.signFile.data) {//手签字
            formData.append('signFile', that.signFile.data);
          }



          //图片赋值
          that.riskInspectItemImgFileList.forEach(function (k, i) {
            formData.append('imgList', k);
          })

          that.axios.post(that.apiUrl.webApi + "/risk/inspect/riskInspectItemOperate", formData, that.public.parameterUploadProgress(that)).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$Message.success('保存成功');
              that.$emit("closeFun", true)
            }
          }).catch(err => {
            console.log('失败', err);
          })
        } else {
          this.$Message.error('请正确填写表单');
        }
      })
    },




  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_riskAcceptanceOperation {

}
</style>
